<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="filters"
        :model="filters"
        :rules="rules"
        label-width="120px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">客户信息</el-col>
          <el-divider content-position="center"></el-divider>
        </el-row>
        <el-row>
          <el-form-item
            label="客户类型:"
            prop="type"
          >
            <el-radio-group v-model="filters.clientType">
              <el-radio-button
                v-for="item in dict['客户类型']"
                :key="item.index"
                :disabled="disabledType"
                :label="item.text"
                :value="item.value"
              >{{ item.text }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="filters.clientType === '个人客户' ? '客户名称:' : '联系人:'"
            prop="clientName"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.clientName"
            />
          </el-form-item>
          <el-form-item
            label="联系电话:"
            v-if="filters.clientType !== '个人客户'"
            prop="phone"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.phone"
            />
          </el-form-item>
          <el-form-item
            label="打印抬头:"
            v-if="filters.clientType !== '个人客户'"
            prop="companyTitle"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.companyTitle"
            />
          </el-form-item>

          <el-form-item
            label="手机号:"
            v-if="filters.clientType === '个人客户'"
            prop="phone"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.phone"
            />
          </el-form-item>
          <el-form-item
            label="性别:"
            v-if="filters.clientType === '个人客户'"
            prop="genderCst"
          >
            <el-radio-group v-model="filters.genderCst">
              <el-radio
                :disabled="disabledType"
                :label="item.text"
                :value="item.value"
                v-for="item in dict['性别']"
                :key="item.index"
              >{{ item.text }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="驾驶证号:"
            prop="jszNum"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.jszNum"
            />
          </el-form-item>
          <el-form-item
            label="驾驶证到期时间:"
            prop="jszExpireTime"
          >
            <el-date-picker
              v-model="filters.jszExpireTime"
              :disabled="disabledType"
              type="date"
              placeholder="到期时间"
              class="w-100"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="生日:"
            v-if="filters.clientType === '个人客户'"
            prop="birthday"
          >
            <el-date-picker
              v-model="filters.birthday"
              :picker-options="pickerOptions"
              :disabled="disabledType"
              type="date"
              placeholder="选择生日"
              class="w-100"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="单位名称:"
            v-if="filters.clientType !== '个人客户'"
            prop="driver"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.companyName"
            />
          </el-form-item>
          <el-form-item
            label="地址:"
            prop="address"
          >
            <el-input
              clearable
              :disabled="disabledType"
              v-model="filters.address"
            />
          </el-form-item>
          <el-row>
            <el-form-item
              label="会员等级:"
              prop="memberLevelDictId"
            >
              <el-select
                clearable
                ref="dragSelect"
                v-model="filters.memberLevelDictId"
                :disabled="true"
                class="w-100"
              >
                <el-option
                  v-for="item in dict['客户会员等级']"
                  :key="item.index"
                  :value="item.id"
                  :label="item.memberGrade"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="客户来源:"
              prop="clientSource"
            >
              <el-select
                clearable
                :disabled="disabledType"
                ref="dragSelect"
                v-model="filters.clientSource"
                class="w-100"
              >
                <el-option
                  v-for="item in dict['客户来源']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="所属门店:"
              v-if="filters.clientType === '个人客户'"
              prop="storeId"
            >
              <job-shop
                v-model="filters.storeId"
                placeholder="所属门店"
              />
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="备注:">
              <el-input
                type="textarea"
                style="min-width: 600px"
                clearable
                :disabled="disabledType"
                v-model="filters.remark"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="客户喜好:">
              <el-input
                type="textarea"
                style="min-width: 600px"
                itemtype=""
                clearable
                :disabled="disabledType"
                v-model="filters.clientLike"
              />
            </el-form-item>
            <!-- <el-form-item label="测试车型:">
              <CarModel v-model="filters.carModels" />
            </el-form-item> -->
          </el-row>
        </el-row>
      </el-form>
    </template>

    <template #contentPanel>
      <div style="line-height: 34px">
        <span>客户车辆信息</span>
        <el-button
          type="primary"
          :disabled="disabledType"
          style="float: right"
          @click="editCarInfo({}, 'add')"
        >添加车辆
        </el-button>
      </div>
      <el-divider content-position="center"></el-divider>
      <data-table
        :value="filters.cars"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="false"
      >
        <template #action="{ row, index }">
          <i
            class="el-icon-edit"
            title="修改"
            style="margin-left: 15px; cursor: pointer"
            @click="editCarInfo(row, 'edit', index)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="deleteCarInfo(row)"
          ></i>
        </template>
      </data-table>
      <el-row>
        <el-col
          :span="24"
          align="right"
        >
          <el-checkbox
            v-model="protocol"
            class="protocol"
            disabled
          >
            <span>我已阅读《<a
                style="color: red"
                @click="openProtocol"
              >隐私声明</a>》</span>
          </el-checkbox>

          <el-button
            type="primary"
            :disabled="disabledType"
            @click="saveUpdate()"
          >保存</el-button>
        </el-col>
      </el-row>
    </template>

    <template #dialog>
      <dialog-data-form
        :value="currentCar"
        :type="type"
        @operate="sendCarInfo"
        v-if="dialogType=='1'"
      />
      <PrivacyStatement
        v-if="dialogType=='2'"
        :phone="filters.phone"
        @setProtocol="setProtocol"
      />
    </template>
  </base-layout>
</template>

<script>
import {
  addClient,
  updateClient,
  getClientById,
  getClientDict,
  clientFindById,
} from '@/api/after-sale/client/client'
import baseMixin from '@/mixins/base'
import { getStoreId, parseTimeToYMDHMS } from '@/utils'
import DialogDataForm from './components/DialogDataForm.vue'
import PrivacyStatement from './components/PrivacySatement.vue'
import { getDict } from '@/utils/index'
import rules from './rules'
import {
  levelList,
} from '@/api/after-sale/client/level'

export default {
  name: 'editCustomerManage',
  components: {
    DialogDataForm,
    PrivacyStatement,
  },
  mixins: [
    baseMixin({
      format (res) {
        return res.map((data) => {
          return data
        })
      }
    })
  ],
  data () {
    return {
      currentPage: 0,
      pageSize: 5,
      totalCount: 0,
      dialogWidth: '1200px',
      disabledType: false,
      tableDataList: [],
      dict: {},
      tableColumnAttributes: [
        {
          name: '车牌号',
          value: 'licensePlateNumber',
          type: 'text',
        },
        {
          name: 'VIN码',
          value: 'vin',
          type: 'text',
        },
        {
          name: '车辆品牌',
          value: 'carBrandName',
          type: 'text',
        },
        {
          name: '车系',
          value: 'carSeriesName',
          type: 'text',
        },
        {
          name: '年款',
          value: 'timeType',
          type: 'text',
        },
        {
          name: '车型',
          value: 'carModelName',
          type: 'text',
        },
        {
          name: '车色',
          value: 'carColor',
          type: 'text',
        },
        {
          name: '里程数',
          value: 'mileage',
          type: 'text',
        },
        {
          name: '录入时间',
          value: 'createTime',
          type: 'text',
        }
      ],
      filters: {
        address: '', //住址
        birthday: '', //出生日期
        cars: [], // 车辆信息
        clientLike: '', //客户喜好
        clientName: '', //客户名称
        clientSource: '注册客户', //客户来源
        clientType: '个人客户', //客户类型
        companyName: '', //公司名称
        jszExpireTime: '', //驾驶证到期日期
        jszNum: '', //驾驶证号
        genderCst: '男', //性别
        id: '', //客户id
        memberLevelDictId: '', //会员等级
        phone: '', //手机号
        companyTitle: '', //打印公司抬头
        remark: '', //备注
        storeId: '', //门店id
        // userName: '', //录入人
      },
      rules: rules,
      currentCar: {},
      type: '',
      rowIndex: 0,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      protocol: false, // 是否签署隐私声明
      dialogType: '0'
    }
  },
  async created () {
    this.dict = getDict(['客户来源', '性别', '客户类型', '客户会员等级'])
    // this.dict['客户会员等级'].map((item) => {
    //   if (item.text == '普卡') this.filters.memberLevelDictId = item.value
    // });
    let { data: { content = [] } } = await levelList({ storeId: getStoreId(), }, 1000, 1);
    this.dict['客户会员等级'] = content;
    this.filters.memberLevelDictId = content && content[0].id;

    let { customerInfoId, customerInfotype } = this.$route.query
    var type = customerInfotype,
      id = customerInfoId
    if (type === 1) {
      this.disabledType = true
    }
    if (id) {
      const { data } = await getClientById(id)
      this.filters = data
      this.protocol = true
    }
  },
  methods: {
    //设置勾选状态
    setProtocol (value) {
      this.protocol = value
      this.dialogVisible = false
    },
    //打开隐私弹窗
    openProtocol () {
      if (!this.filters.phone) {
        this.$message.error('请输入手机号码')
        return
      }
      this.dialogType = '2'
      this.dialogVisible = true
    },
    async saveUpdate () {
      // if (!this.protocol) {
      //   this.$message.warning('请先勾选隐私协议')
      //   return
      // }
      let params = this.filters
      params.jszExpireTime = params.jszExpireTime
        ? parseTimeToYMDHMS(params.jszExpireTime)
        : ''
      params.birthday = params.birthday
        ? parseTimeToYMDHMS(params.birthday)
        : ''
      const { success } = this.filters.id
        ? await updateClient(this.filters)
        : await addClient(this.filters)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.closeRouter('/client-manage/client')
      } else {
        this.$message.error('操作失败')
      }
    },
    sendCarInfo (val, type) {
      console.log(val)
      let newCars = this.filters.cars
      if (type == 'add') {
        newCars.unshift(val)
      } else if (type == 'edit') {
        newCars[this.rowIndex] = val
        // newCars = newCars.filter((e) => {
        //   if (e.id == this.currentCar.id) {
        //     return val
        //   }
        // })
      }
      this.filters.cars = [...newCars]
      this.dialogVisible = false
    },
    editCarInfo (row, type, index = 0) {
      this.currentCar = row
      this.type = type
      this.dialogType = '1'
      this.dialogVisible = true
      this.rowIndex = index
    },
    deleteCarInfo (row) {
      this.filters.cars = this.filters.cars.filter((e) => e != row)
    },
  },
  mounted () { },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

/deep/ .el-form-item__content {
  width: 250px;
  vertical-align: middle;
}
/deep/ .el-radio-group {
  display: flex;
  padding: 10px 0;
}
.protocol {
  margin-right: 20px;
}
</style>
